<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key">
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="2">
			<Select  placeholder="请选择状态" clearable v-model="statusKey" :style="{marginLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="8">
			<Button type="primary" :style="{marginLeft:'30px'}" @click="search">搜索</Button>
			<Button type="info" @click="init()"><Icon type="md-refresh" :size="16"/></Button>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table :loading="tableLoading" border stripe :columns="columns" :data="commentData.data"></Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="commentData.total" :page-size="commentData.pageSize" :current.sync="commentData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>
	<Modal v-model="showReply" :title="'回复:'+vReply.uname" @on-ok="onReplySave">
		<quill-editor ref="quill1" v-model="vReply.content" :options="editorOption"></quill-editor>

	</Modal>
</div>
</template>
<script>

// 引入子组件
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

// quill编辑器的字体
var fonts = ['SimSun', 'Microsoft-YaHei','Arial','Times-New-Roman','sans-serif'];  
var Font = Quill.import('formats/font'); 
Font.whitelist = fonts; //将字体加入到白名单 
Quill.register(Font, true);


// 引入子组件
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
export default { 
	name:'publisher-index',
	components: {Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'评论列表',
			tableLoading:true,
			commentData:[],
			showReply:false,
			replyObject:'',
			vReply:{content:''},
			editorOption:{
				placeholder:'请输入内容',
				modules:{
					imageResize: {},
					toolbar:{
                        container: [
							['bold', 'italic', 'underline', 'strike'],        // toggled buttons
							['blockquote', 'code-block'],           // custom button values
							[{ 'list': 'ordered'}, { 'list': 'bullet' }],
							[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
							[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
							['link'],
							[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
							[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

							[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
							[{ 'font': fonts }],
							[{ 'align': [] }],
							['clean'], 
                        ],
                    },
					syntax: {highlight:text => hljs.highlightAuto(text).value},


				}
			},
			statusKey:'',
			statusList: [
				{value: 0,label: '暂存'},
				{value: 1,label: '已审核'},
				{value: 2,label: '重新审核'},
			],
			filterKey:'',
			key:'',
			keyList: [
				{value: 'content',label: '内容'},
			],
			columns:[
				{title: '编号',key: 'id',width: 70,fixed: 'left'},
				
				{title: '文章标题',key: 'title'},
				{title: '用户名',key: 'uname'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['暂存','已审核','重新审核','删除']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '排序',key: 'sequence', sortable: true},
				{title: '点赞数',key: 'like'},
				{title: '吐槽数',key: 'unlike'},
				{title: '回复数',key: 'reply'},
				{title: '内容',key: 'content',type:'html'},
				{title: '回复时间',key: 'created_at',render: (h, params) => {
					return h('div',this.dateFormat(new Date(params.row.created_at*1000),'yyyy-MM-dd'))
				}},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:220,
					render: (h, params) => {
						return h('div', [
							h(Button, {
								props: {
									type: 'success',
									size: 'small',
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {this.$router.push({path:'/cms/comment/edit/'+params.row.id})}
								}
							}, '编辑'),
							h(Button, {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:1==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,1,params.index)}
								}
							}, '审核'),
							h(Button, {
								props: {
									type: 'warning',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:1==params.row.status?'inline-block':'none'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,2,params.index)}
								}
							}, '撤审'),
							h(Button, {
								props: {
									type: 'info',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									// display:2==params.row.status||0==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {
										this.vReply= JSON.parse(JSON.stringify(params.row));
										this.vReply.content=''
										this.showReply=true}
								}
							}, '回复'),
							h(Button, {
								props: {
									type: 'error',
									size: 'small'
								},
								style: {
									display:3==params.row.status||0==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {
										this.$Modal.confirm({
											title: '温馨提示',
											content: '删除后不可恢复，确认删除？',
											onOk: () => {
												this.changeStatus(params.row.id,3,params.index)
											},
										})
									}
								}
							}, '删除')
						]);
					}
				}

			],
		}
	},
	methods:{
		init:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/cms/comments",{params: { 'token': self.token }})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error(error.message)
				self.tableLoading=false
			})
		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/cms/comments",{params: { 'token': self.token, page:self.commentData.page, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.commentData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/cms/comments",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
		changeStatus:function(uid,statusId,index){
			let self=this
			self.tableLoading=true
			self.$http.post("/v1/cms/comments?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				self.tableLoading=false
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.commentData.data.splice(index,1)}
					else{self.commentData.data[index].status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.tableLoading=false
			})
		},
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/cms/comments",{params: { 'token': self.token, page:1, pageSize: self.commentData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.commentData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})

		}
		,onReplySave:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/cms/comments?token="+self.token,{'data':JSON.stringify(self.vReply)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功');
				}else{
					
					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		}
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token']),
	}
}



</script>
<style lang="less" scoped>
</style>